<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mashup Services</title>
<link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.0a4.1.css" />
<script src="jquery/jquery-1.6.1.min.js"></script>
<script src="jquery/jquery.mobile-1.0a4.1.js"></script>
<script type="text/javascript">
	function monitorContext() {
		navigator.geolocation.getCurrentPosition(function(pos) {
			$('#lat').text(pos.coords.latitude);
			$('#lng').text(pos.coords.longitude);
		});
		setTimeout(monitorContext, 1000);
		//$('#product_list_item').attr('data-theme', 'e').removeClass("ui-btn-up-c").addClass("ui-btn-up-e");
		//$.mobile.changePage("notification_dialog.html", "pop", false, false);
		//setTimeout(monitorContext, 1000);
	}
	$('document').ready(function() {
		//setTimeout(monitorContext, 1000);
	});
</script>
</head>
<body>
<div data-role="page" data-theme="b">
	<div data-role="header">
		<h1>Mashup Services</h1>
	</div>
	<div data-role="content" data-theme="c">
		<ul id="service_list" data-role="listview" data-split-theme="d" data-theme="c">
			<li id="" data-theme="c">
			<a rel="external" href="#" class="ui-link-inherit">
				<h3 class="ui-li-heading">버스 도착 정보 제공</h3>
				<p class="ui-li-desc">설정된 버스 곧 도착 + 버스정류장 근처시 알림</p>
			</a>
			</li> 
			<li id="">
			<a rel="external" href="#">
				<h3 class="ui-li-heading">친구와의 메시지 서비스</h3>
				<p class="ui-li-desc">근처에 친구가 도착했을 때 알림</p>
			</a>
			</li> 
			<li id="">
			<a rel="external" href="#">
				<h3 class="ui-li-heading">할인 정보 제공 서비스</h3>
				<p class="ui-li-desc">근처에 할인 행사가 있을때 알림</p>
			</a>
			</li> 
		</ul>
	</div>
	<div data-role="footer" data-theme="a">
		<div data-role="navbar">
			<ul>
				<li><a href="preference.html" data-icon="gear">Preference</a></li>
				<li><a rel="external" class="ui-btn-active" href="context_monitor.html" class="ui-btn-active" data-icon="star">Monitor</a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>